<template>
  <div class="flex-column">
    <div class="flex justify-between flex-wrap flex-row-reverse">
      <div class="text-right mb-10 flex justify-end">
        <el-select
          v-model="abnormalType"
          size="mini"
          style="width: 250px"
          :placeholder="$t('SELECT_ABNORMAL_NETWORK_SEGMENT_STATUS')"
        >
          <el-option
            v-for="port in dictList.ABNORMAL_SEGMENT_STATUS"
            :key="port.value"
            :label="port.label"
            :value="port.value"
          />
        </el-select>
        <el-button
          type="primary"
          class="ml-10"
          :disabled="!abnormalType"
          @click="$debounce(loadData)"
        >{{ $t('QUERY') }}</el-button>
      </div>
    </div>

    <TableView
      v-if="abnormalType === 'LINK_SECTION_ERROR_CLEANING'"
      :table-header="tablehead"
      :table-data="tableData"
      :options="{configure: false }"
      @operate="operate"
    />
    <TableView
      v-else
      :table-header="tableHeader"
      :table-data="tableData"
      :options="{pagination: false }"
      @operate="operate"
    />
    <edit ref="editBox" :visible="editShow" :row-data="rowData" @close="closeEdit" />
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import routeSegmentApi from '@/api/oen/DevAdjust'
  import { changeDecimal, getParentsById } from '@/utils/common'
  import Edit from './Edit'
  import TableView from '@/components/TableView'

  export default {
    name: 'DevAdjust',
    components: {
      Edit,
      TableView
    },
    data() {
      return {
        abnormalType: '',
        tableData: [],
        rowData: {},
        editShow: false,
        tableHeader: [
          {
            label: 'SEGMENT_NAME',
            prop: 'segmentName',
            width: 200
          },
          {
            label: 'A_END_REGIONAL_STATION_NAME',
            prop: 'startStationName',
            width: 200
          },
          {
            label: 'A_END_ROOM_NAME',
            prop: 'startRoomName',
            width: 200,
            configType: 'extend'
          },
          {
            label: 'ANODE',
            prop: 'startNode.nodeName',
            width: 200
          },
          {
            label: 'Z_END_REGIONAL_STATION_NAME',
            prop: 'endStationName',
            width: 200
          },
          {
            label: 'Z_END_ROOM_NAME',
            prop: 'endRoomName',
            width: 200,
            configType: 'extend'
          },
          {
            label: 'ZNODE',
            prop: 'endNode.nodeName',
            width: 200
          },
          {
            label: 'CABLE_NAME',
            prop: 'cable.cableName',
            width: 140
          },
          {
            label: 'RESOURCECODE',
            prop: 'resourceCode',
            width: 140,
            formatter(row) {
              return (row.cable && row.cable.resourceCode) || ''
            }
          },
          {
            label: 'CABLE_LENGTH',
            prop: 'cableLength',
            width: 140
          },
          {
            label: 'CABLE_CODE',
            prop: 'cableId',
            width: 200
          },
          {
            label: 'SEGMENT_CODE',
            prop: 'segmentId',
            width: 200
          }
        ],
        tablehead: [
          {
            label: 'AFS_CODE',
            prop: 'afsId',
            type: 'afs'
          },
          {
            label: 'DEVICE_NAME',
            prop: 'deviceName',
            type: 'afs'
          }
        ]
      }
    },
    computed: {
      ...mapGetters(['dictMap', 'dictList', 'baseRegionList', 'stationTree']),
      permission() {
        return this.$store.getters.getAuthData('conf:segmentDetection')
      }
    },
    methods: {
      loadData() {
        this.tableData = []
        const type = this.abnormalType
        if (type === 'LINK_SECTION_ERROR_CLEANING') {
          routeSegmentApi.checkPortList().then((res = []) => {
            res = res || []
            res.map(i => {
              i.startStationName = this.getRegionName(i.startStationId)
              i.endStationName = this.getRegionName(i.endStationId)
              i.startRoomName = this.getRoomName(i.startNode.roomId)
              i.endRoomName = this.getRoomName(i.endNode.roomId)
              i.btns = [{
                key: 'deal',
                show: this.permission.mod,
                label: 'DEAL_WITH'
              }]
            })
            this.tableData = res
          })
          return
        }
        routeSegmentApi.queryList({ type }).then((res = []) => {
          res = res || []
          this.tableData = res.map(i => {
            return {
              ...i.networkSegment,
              startStationName: this.getRegionName(i.networkSegment.startStationId),
              endStationName: this.getRegionName(i.networkSegment.endStationId),
              startRoomName: this.getRoomName(i.networkSegment.startNode.roomId),
              endRoomName: this.getRoomName(i.networkSegment.endNode.roomId),
              cableLength: changeDecimal(i.cableLength, 3, true),
              abnormalType: type,
              debugSegmentChannelList: i.debugSegmentChannelList,
              btns: this.getBtns(i)
            }
          })
          // console.log('this.tableData', this.tableData)
        })
      },
      getBtns(row) {
        const btns = [
          {
            key: 'mod',
            show: this.permission.mod,
            label: 'MOD'
          }
        ]
        return btns.filter(i => i.show)
      },
      operate(data) {
        switch (data.type) {
        case 'mod':
          this.mod(data.data)
          break
        case 'deal':
          this.deal()
          break
        }
      },
      deal() {
        this.$confirm(this.$t('HANDLE_ERRONEOUS_DATA'), this.$t('TIP'), {
          confirmButtonText: this.$t('YES'),
          cancelButtonText: this.$t('CANCEL'),
          type: 'warning'
        }).then(() => {
          routeSegmentApi.handlePortError().then(res => {
            this.loadData()
            this.$message({
              type: 'success',
              message: this.$t('OPERATE_SUCCESS')
            })
          })
        }).catch(() => {

        })
      },
      // 获取区域/站点
      getRegionName(regionId) {
        const parents = getParentsById(this.stationTree, regionId, 'regionId') || []
        return parents
          .reverse()
          .map(i => i.regionName)
          .join('/')
      },
      // 机房
      getRoomName(roomId) {
        if (!roomId) return ''
        const stationData = this.baseRegionList.find(i => i.regionId === roomId)
        return stationData ? stationData.regionName : ''
      },
      // 修改
      mod(row) {
        this.rowData = row
        if (!this.rowData.startNode || !this.rowData.endNode) {
          this.$message.error(this.$t('NODE_ERROR'))
          return
        }
        this.editShow = true
      },
      // 弹窗关闭
      closeEdit(load) {
        this.editShow = false
        if (load === true) {
          this.loadData()
        }
      }
    }
  }
</script>

<style></style>
